<script setup lang="ts">
import { ref } from "vue";
import router from "@/router";
import { useSystemStoreWithOut } from "@/store/modules/system";
import { storeToRefs } from "pinia";

const systemStore = useSystemStoreWithOut();
const { warehouseList, materialTypeList } = storeToRefs(systemStore);

const emits = defineEmits(["handleSearch"]);
let searchForm = ref({
  warehouseCode: "",
  materialType: "",
  materialName: "",
  materialSpecsId: ""
});

let handleReset = () => {
  searchForm.value = {
    warehouseCode: "",
    materialType: "",
    materialName: "",
    materialSpecsId: ""
  };
  emits("handleSearch");
};

let addNewCostomer = () => {
  router.push({
    name: "outboundAddDetail"
  });
};

defineExpose({
  getForm: () => searchForm.value
});
</script>

<template>
  <header class="header flex-row w-full wrapper-form">
    <div class="header_left flex-1">
      <el-form class="form" :model="searchForm" inline>
        <div class="inline-flex">
          <el-form-item label="仓库名称" prop="warehouseCode">
            <el-select v-model="searchForm.warehouseCode" placeholder="请选择" clearable>
              <el-option
                v-for="(item, index) in warehouseList"
                :key="index"
                :value="item.warehouseCode"
                :label="item.warehouseName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="物料类型" prop="materialType">
            <el-select v-model="searchForm.materialType" placeholder="请输入" clearable>
              <el-option
                v-for="(item, index) in materialTypeList"
                :key="index"
                :value="item.dictLabelValue"
                :label="item.dictLabelName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="物料名称" prop="materialName">
            <el-input v-model="searchForm.materialName" placeholder="请输入" />
          </el-form-item>
        </div>
        <div class="inline-flex">
          <el-form-item label="物料规格" prop="materialSpecsId">
            <el-select v-model="searchForm.materialSpecsId" placeholder="请输入" clearable> 
              <!-- <el-option
                v-for="(item, index) in materialSpecsList"
                :key="index"
                :value="item.value"
                :label="item.label"
              /> -->
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="emits('handleSearch')"
            >查询</el-button
          >
          <el-button @click="handleReset">重置</el-button>
        </div>
      </el-form>
    </div>
    <!-- <div class="header_right">
      <el-button @click.prevent.stop="addNewCostomer"
        ><svg-icon name="download" size="16" /> &nbsp;导出</el-button
      >
    </div> -->
  </header>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;

  .header_left {
    display: flex;
    align-items: center;
    height: 100%;

    .form {
      width: 100%;
    }
  }

  .header_right {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;

    :deep(.el-button + .el-button) {
      margin-left: 0;
    }
  }
}
</style>
